今日要點
》前言
》介紹 flutter_layout_article 專案
》下載並編譯 flutter_layout_article 專案
好，前面開發環境建立起來，也建立出第一個專案 Hello World 後，開始很心動K手冊，看程式碼，動手寫程式了嗎？這是很正常的想法，但這會面對二大挫折點：
所以我改變學習的方向，在了解初步的概念後，從 Run Run 高手的程式開始吧～ 先看看很厲害的高手能做出什麼作品出來。雖然現在的程式功力，可能看不懂這些程式碼。但我能 build 的起來，能放到我手機裡看看，不是很酷嗎，然後心想，哇，原來可以寫成這樣，就有動力學下去了!! 熱情是所有學習的動力來源阿~
那麼！高手的 code 都在那裡，當然是在 Github 阿，所以接下來我們都會在 Github 中尋寶...
好吧，我本來想直接就開始介紹美美的專案，BUT！在我下載專案練習的過程中，三不五時就出現施工封鎖條的圖形。我說 Flutter 阿！你一定要這麼明顯的指出長寬的佈局有那裡錯了嗎 XD
為了避免下載了專案來研究，但執行起來到處出現施工圖，然後也不知道發生什麼事的囧境，所以第一個專案，我先來介紹這個非常厲害的專案，由 Marcelo Glasberg 撰寫的佈局教學 Flutter: The Advanced Layout Rule Even Beginners Must Know，這篇文章有5.7K claps，還被收錄到官方網站 Understanding constraints真就有點強大，想信大家讀了都受益非淺，請務必移步去看看 :)
還有網友的中文翻譯，最下面的參考有引用的連結。
Flutter 的佈局方式與 HTML 的佈局差異相當大，最好熟記這些規則：
首先，上層 widget 向下層 widget 傳遞約束條件。
約束條件僅是4個集合：最小寬度 最大寬度，最小高度 最大高度。所以下層從其上層獲得自己的約束。
然後，下層 widget 向上層 widget 傳遞大小信息。
上層會向下層詢問每個下層要設置的大小。
最後，上層 widget 決定下層 widget 的位置。
上層將其下層（在x軸水平，在y軸垂直）定位。
最重要的就是這三點，更詳細的說明，請閱讀文章的內容，我覺得寫的非常好，真的是很用心有誠意的指導老師。
那麼我們就開始下載並且建立這個 flutter_layout_article 專案囉。
% git clone https://github.com/marcglasberg/flutter_layout_article.git
Cloning into 'flutter_layout_article'...
remote: Enumerating objects: 177, done.
remote: Counting objects: 100% (177/177), done.
remote: Compressing objects: 100% (112/112), done.
remote: Total 177 (delta 55), reused 152 (delta 40), pack-reused 0
Receiving objects: 100% (177/177), 190.26 KiB | 503.00 KiB/s, done.
Resolving deltas: 100% (55/55), done.
% cd flutter_layout_article
% flutter pub get
Running "flutter pub get" in flutter_layout_article... 1.1s
好，程式碼都準備好了，那就開始 build 啦，先把模擬器都開起來。
我開了二個 Android 模擬器，二個 iOS 模擬器。
可以用這個指令看看裝置的細節
% flutter devices
然後開始編譯，並且安裝到所有的裝置並且執行。
% flutter run -d all
我的執行過程
沒意外的話，就會看到所有的裝置都有畫面了。
這個專案的介面很方便，分為三個部份：
範例第14, 跟第24就是會出現施工封鎖條圖形的範例啦，大家可以仔細看看教學的說明。
以上先介紹到這邊啦，有留言的話，再找時間補充。哈
周末真是備稿與存稿的好時光丫，今日完全沒行程，好好的跟鐵人賽奮鬥！
好，第5天，寫完。
參考
iThome鐵人賽
看影片追技術